
<template>
	<gracePage :customHeader="false">
		<view slot="gBody" >
			<view class="grace-space-between" style="margin-top: 16rpx;padding: 0 24rpx;">
				<view class="grace-flex-center" style="background-image:url(../../static/jindutian.png);background-repeat: no-repeat; width: 230rpx;height: 40rpx;background-size: contain;">
					<text style="font-size:28rpx;font-weight:400;color:rgba(255,255,255,1)">1.卡号信息</text>
				</view>
				<view class="grace-flex-center" style="background-image:url(../../static/jindutiao1.png);background-repeat: no-repeat; width: 230rpx;height: 40rpx;background-size:contain;">
					<text style="font-size:28rpx;font-weight:400;color:rgba(255,255,255,1)">2.安全码</text>
				</view>
				<view class="grace-flex-center" style="background-image:url(../../static/jindutiao1.png);background-repeat: no-repeat; width: 230rpx;height: 40rpx;background-size: contain;">
					<text style="font-size:28rpx;font-weight:400;color:rgba(255,255,255,1)">3.还款日/账单日</text>
				</view>
			</view>
			<view style="margin-top: 35rpx;">
				<!-- reto('/pages/issuer_selection/issuer_selection?banck=信用卡') -->
				<view @tap="xuanzefakahang" class="grace-rows grace-flex-vcenter" style="width:750rpx;height:100rpx;background:rgba(255,255,255,1);">
					<text style="margin-left: 35rpx; font-size:30rpx;font-weight:400;color:rgba(51,51,51,1);">发卡行：</text>
					<text class="grace-ellipsis" style="position: relative; left: 70rpx; font-size:26rpx;font-weight:400;color:rgba(153,153,153,1);">{{ fakahangname != '' ? fakahangname:'请选择发卡行'}}</text>
					<image src="../../static/jiantou.png" style="position: absolute;left: 650rpx; width: 20rpx;height: 35rpx;"></image>
				</view>
			</view>
			<view v-show="fakahangname">
			<view class="grace-flex-center" style="width: 750rpx;margin-top: 40rpx;" @tap="getIDCard()">
				<view >
					<image :src=" id_card_img.length>0 ? id_card_img : '../../static/youxiaoqi.png'" style=" width: 544rpx;height: 328rpx;"></image>
				</view>
			</view>
			
			<view class="grace-rows grace-flex-center" style="margin: 25rpx 0;">
				<image src="../../static/xiangji.png" style="width: 40rpx;height: 40rpx;"></image>
				<text style="margin-left: 20rpx; font-size:23rpx;font-weight:400;color:rgba(51,51,51,1);">{{ xiangjishuoming }}</text>
			</view>
			</view>
			<view style="margin-top: 1rpx;">
				<view class="grace-rows grace-flex-vcenter" style="width:750rpx;height:100rpx;background:rgba(255,255,255,1);">
					<text style="margin-left: 35rpx; font-size:30rpx;font-weight:400;color:rgba(51,51,51,1);">信用卡卡号：</text>
					<input v-model="xinyongkahao" placeholder="请输入信用卡号" style="margin-left: 30rpx;width: 500rpx;font-size: 24rpx;"/>
				</view>
				
				<view class="grace-rows grace-flex-vcenter" style="width:750rpx;height:100rpx;background:rgba(255,255,255,1);">
					<text style="margin-left: 35rpx; font-size:30rpx;font-weight:400;color:rgba(51,51,51,1);">信用卡额度：</text>
					<input v-model="edu" @input="tianxieedu" placeholder="请输入信用卡额度" style="margin-left: 30rpx;width: 500rpx;font-size: 24rpx;"/>
				</view>
				
				<view class="grace-rows grace-flex-vcenter" style="margin-top: 2rpx; width:750rpx;height:100rpx;background:rgba(255,255,255,1);">
				     <text style="margin-left: 35rpx; font-size:30rpx;font-weight:400;color:rgba(51,51,51,1);">有效期：</text>
				     <input type='number' :focus='M_jujiao' maxlength='2' v-model="youxiaoqi_M" @input="youxiaoqi_js_M" placeholder="MM" placeholder-style="text-align: center;" style="text-align: center; margin-left: 95rpx;width: 100rpx;border-bottom: #000000 solid 2rpx;"/>
				     <text style="margin-left: 20rpx; font-size: 60rpx;">/</text>
				     <input type='number' :focus='Y_jujiao' maxlength='2' v-model="youxiaoqi_Y" @input="youxiaoqi_js_Y" placeholder="YY" placeholder-style="text-align: center;" style="text-align: center;margin-left: 20rpx;width: 100rpx;border-bottom: #000000 solid 2rpx;"/>
				    </view>
				
				<view style="margin-top: 10rpx;margin-left: 30rpx;">
					<text style="font-size:26rpx;font-weight:400;color:rgba(153,153,153,1);">*仅支持添加本人名下信用卡</text>
				</view>
			</view>
			<view>
				<button @tap="submit" style="margin-top: 70rpx; width:500rpx;height:90rpx;background:#1678FF;box-shadow:0px 2rpx 5rpx 0px rgba(67,67,67,0.3);border-radius:20rpx;font-size:32rpx;font-weight:400;color:rgba(255,255,255,1);">下一步</button>
			</view>
		</view>
	</gracePage>
</template>

<script>
// #ifdef APP-PLUS
const card = uni.requireNativePlugin('DC-CardRecognize');
// #endif
import gracePage from "../../graceUI/components/gracePage.vue";
export default {
	data() {
		return {
			id_card_img:'',
			card_img_id:'',
			fakahangid:'',
			fakahangname:'',
			xinyongkahao:'',
			youxiaoqi_M:'',
			youxiaoqi_Y:'',
			M_jujiao:false,
			Y_jujiao:false,
			show_youxiaoqi:'',
			Y_len:0,
			xiangjishuoming:'请点击卡片上传图片',
			edu:'',
			types: ''
		}
	},
	
	
	
	onLoad:function(opt){
		this.types = opt.types
		 this.xiangjishuoming='可点击卡面拍照识别';
	},
	components:{
		gracePage
	},
	methods:{
		xuanzefakahang(){
			console.log(this.types)
			uni.$once('xuanzefakahang',this.querenfakahang);
			this.Goto('/pages/issuer_selection/issuer_selection?type=2');
		},
		querenfakahang(data){
			this.fakahangid=data.id,
			this.fakahangname=data.name
		},
		submit(){
			if(this.fakahangid===''||this.xinyongkahao===''||this.youxiaoqi_M===''||this.youxiaoqi_Y===''||this.edu===''){
				this.msg_show('请将信息填写完整');
			}else{
				this.Goto('/pages/add_credit_card/add_credit_card2?bc_bank_id='+this.fakahangid+'&bc_bank_number='+this.xinyongkahao+'&tubiao='+this.card_img_id+'&bc_effective='+this.youxiaoqi_M+'/'+this.youxiaoqi_Y+'&edu='+this.edu)
			}
		},
		//填写额度
		tianxieedu:function(obj){
			var edu = obj.detail.value;
			this.edu = edu;
		},
		
		tupian(file_base64, path) {
				var vm = this;
				vm.req.post(
					vm.lochost + '/mytrunk/uploadfile/base64upfile', {
						file: file_base64
					}, {},
					function(res) {
						vm.id_card_img = res.data[0].quan_path;
						vm.card_img_id = res.data[0].id;
						console.log(res);
					}
				)
			},
		youxiaoqi_js_M(val){
			console.log(val)
			var vale=val.target.value;
			if(vale.length===2){
				this.M_jujiao=false;
				this.Y_jujiao=true;
			}
		},
		youxiaoqi_js_Y(val){
			console.log(val)
			var vale=val.target.value;
			if(vale.length===0 && this.Y_len===1){
				this.Y_jujiao=false;
				this.M_jujiao=true;
			}
			this.Y_len=vale.length;
		},
		// youxiaoqi(val){
		// 	var vale=val.target.value;
		// 	this.youxiaoqi_val=vale;
		// 	if(vale.length===2){
		// 		this.show_youxiaoqi=vale+'/';
		// 	}
		// 	if(vale.length===3){
		// 		if(this.show_youxiaoqi.length===4){
		// 			this.show_youxiaoqi=this.show_youxiaoqi.substring(-3, 2);
		// 		}else if(this.show_youxiaoqi.length===2){
		// 			console.log(vale.length);
		// 			this.show_youxiaoqi=vale.slice(0,2)+'/'+vale.slice(2)  
		// 		}
		// 	}
		// },
		getIDCard() {
				if(this.fakahangid===''){
					this.msg_show('请先选择发卡行喔！')
				}else{
				var vm = this;
				// #ifdef APP-PLUS
				card.startRecognize({
					maskType: "BankCard"
				}, result => {
					
					this.xinyongkahao = result.bank_card_number;
					this.youxiaoqi_M =result.valid_date.substring(0,2);
					this.youxiaoqi_Y=result.valid_date.substring(3,5);
					
					// 从本地加载Bitmap图片
					//result.path:ocr识别返回的路径
					if (result.path) {
						const bitmapT = new plus.nativeObj.Bitmap("test"); //test标识随便取
						bitmapT.load(result.path, function() {
							console.log('加载图片成功');
							const base64 = bitmapT.toBase64Data();
							// base4:已转为base64的图片
							const file_base64 = {
								name: 'pic.jpg',
								base64: base64
							};
							vm.tupian(file_base64, result.path);
							bitmapT.clear();
						}, function(e) {
							console.log('加载图片失败：' + JSON.stringify(e));
						});
					}
					console.log(JSON.stringify(result));
				});
				// #endif
				
				// #ifndef APP-PLUS
				uni.chooseImage({
				    count: 1, //默认9
				    sizeType: ['compressed'], //可以指定是原图还是压缩图，默认二者都有
				    sourceType: ['album','camera'], //从相册选择
				    success: function (res) {
						var tempFilePaths=res.tempFilePaths;
						 uni.uploadFile({
						            url:vm.lochost+'/mytrunk/uploadfile/upfile', //仅为示例，非真实的接口地址
						            filePath: tempFilePaths[0],
						            name: 'file',
						            formData: {
						                'file': 'pic.jpg'
						            },
						            success: (uploadFileRes) => {
						                const res1 = JSON.parse(uploadFileRes.data);
										vm.id_card_img = res1.data[0].quan_path;
										vm.card_img_id = res1.data[0].id;
						            }
						        });
				    }
				});
				// #endif
				}
		},
		isEmptyObject(obj) {
		  for (var key in obj) {
		    return false;
		  }
		  return true;
		}
	}
}
</script>

<style>
</style>